<template>
  <div id="metaColumeManager">
    <v-header title="物理表字段" :showDownloadBtn="isDownLoadShow" :saveShow="false"></v-header>
    <el-container class="meta-colume-box">
      <el-header class="header-tool-bar" height="50px">
        <!-- 工具栏 -->
        <el-row>
          <el-button type="primary" size="mini" @click="addMetaColume">增加</el-button>
          <el-button type="primary" size="mini" @click="deleteMetaColume">删除</el-button>
          <el-button type="primary" size="mini" @click="modifyMetaColume">编辑</el-button>
          <el-button type="primary" size="mini" @click="refresh">刷新</el-button>
          <span class="conditionquery">
                        <el-input v-model="condition" size="mini" prefix-icon="el-icon-search" placeholder="请输入内容"
                                  clearable></el-input>
                        <el-button type="primary" size="mini" @click="conditionquery">查询</el-button>
                    </span>
        </el-row>
      </el-header>
      <el-main class="main-cont">
        <!-- 表格 -->
        <el-table :data="metaColumeList" @selection-change="handleSelectionChange" v-loading="tableLoading"
                  @select="handleSelect" @select-all="handleSelect" v-model="checked" ref="table" class="meta-col-table">
          <el-table-column type="selection" width="auto"></el-table-column>
          <el-table-column prop="meta_id" label="元数据代码" width="auto"></el-table-column>
          <el-table-column prop="table_name" label="英文表名" width="auto"></el-table-column>
          <el-table-column prop="colume_name" label="英文字段名" width="auto"></el-table-column>
          <el-table-column prop="colume_chs" label="中文字段名" width="auto"></el-table-column>
          <el-table-column prop="colume_attr" label="字段属性" width="auto" :formatter="fmtcolumeattr"></el-table-column>
          <el-table-column prop="code_id" label="代码ID" width="auto"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5,10,15,20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
          class="pagination">
        </el-pagination>
      </el-main>
    </el-container>
    <!-- 新增/编辑弹窗 -->
    <el-dialog :title="editMode == 'ADD' ? '新增数据':'编辑数据'" :visible.sync="editDialogShow" width="900px" v-model="editMode" @close="closeDialog">
      <el-form :model="metaColumeForm" :rules="rules" ref="metaColumeForm" label-width="140px">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="元数据代码" prop="meta_id">
              <el-input v-model="metaColumeForm.meta_id" :disabled="true"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="英文表名" prop="table_name">
              <el-input v-model="metaColumeForm.table_name"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="英文字段名" prop="colume_name">
              <el-input v-model="metaColumeForm.colume_name"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="对应数据代码" prop="elem_meta_id">
              <el-input v-model="metaColumeForm.elem_meta_id"/>
            </el-form-item>
          </el-col>
        </el-row >
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="中文字段名" prop="colume_chs">
              <el-input v-model="metaColumeForm.colume_chs"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="字段属性" prop="colume_attr">
              <el-select v-model="metaColumeForm.colume_attr" placeholder="请选择">
                <el-option
                  v-for="item in options.colume_attr"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row >
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="业务描述" prop="busi_desc">
              <el-input v-model="metaColumeForm.busi_desc"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="技术描述" prop="tech_desc">
              <el-input v-model="metaColumeForm.tech_desc"/>
            </el-form-item>
          </el-col>
        </el-row >
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="代码ID" prop="code_id">
              <el-input v-model="metaColumeForm.code_id"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据类型" prop="data_type">
              <el-select v-model="metaColumeForm.data_type" placeholder="请选择">
                <el-option
                  v-for="item in options.data_type"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row >
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="数据格式" prop="data_fmt">
              <el-input v-model="metaColumeForm.data_fmt"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示格式" prop="display_fmt">
              <el-input v-model="metaColumeForm.display_fmt"/>
            </el-form-item>
          </el-col>
        </el-row >
        <div class="form-buttons">
          <el-button @click="reset">重置</el-button>
          <el-button @click="closeDialog">关闭</el-button>
          <el-button type="primary" @click="submitForm">确定</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
  import ajax from '../../../../api/ajax/ajax'
  import { VHeader } from '../../../../components'
  import api from '../../../../api/url'
  let kanbanAjax = vm => {}
  export default{
    name: 'meta-colume-manager',
    components: {
      VHeader
    },
    data () {
      return {
        options: {
          colume_attr: [
            {
              value: 'default',
              label: '默认属性'
            },
            {
              value: 'event',
              label: '事件属性'
            },
            {
              value: 'user',
              label: '用户属性'
            },
            {
              value: 'equipment',
              label: '设备属性'
            }
          ],
          data_type: [
            {
              value: 'number',
              label: '数值'
            },
            {
              value: 'date',
              label: '日期'
            },
            {
              value: 'text',
              label: '文本'
            }
          ]
        },
        tableLoading: true,
        isDownLoadShow: false,
        checked: false,
        condition: '',
        editMode: 'ADD', // 编辑模式
        multipleSelection: [], // 多选数组
        currentPage: 1, // 当前页
        pageSize: 10, // 分页数据条数
        pageTotal: 0, // 总页数
        editDialogShow: false, // 编辑弹窗显示与否
        delMetaColumes: [],
        metaColumeList: [],
        initFormData: {},
        metaColumeForm: {
          meta_id: '',
          table_name: '',
          colume_name: '',
          elem_meta_id: '',
          colume_chs: '',
          colume_attr: '',
          busi_desc: '',
          tech_desc: '',
          code_id: '',
          data_type: '',
          data_fmt: '',
          display_fmt: '',
          date: ''
        },
        rules: {
          meta_id: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 60, message: '最多输入60个字符', trigger: 'blur' }
          ],
          table_name: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 60, message: '最多输入60个字符', trigger: 'blur' }
          ],
          colume_name: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 60, message: '最多输入60个字符', trigger: 'blur' }
          ],
          elem_meta_id: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 20, message: '最多输入20个字符', trigger: 'blur' }
          ],
          colume_chs: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 60, message: '最多输入60个字符', trigger: 'blur' }
          ],
          colume_attr: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 20, message: '最多输入20个字符', trigger: 'blur' }
          ],
          busi_desc: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 150, message: '最多输入150个字符', trigger: 'blur' }
          ],
          tech_desc: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 150, message: '最多输入150个字符', trigger: 'blur' }
          ],
          code_id: [
            // { required: true, message: '请输入', trigger: 'blur' },
            { max: 20, message: '最多输入20个字符', trigger: 'blur' }
          ],
          data_type: [
            { required: true, message: '请输入', trigger: 'blur' },
            { max: 20, message: '最多输入20个字符', trigger: 'blur' }
          ],
          data_fmt: [
            // { required: true, message: '请输入', trigger: 'blur' },
            { max: 20, message: '最多输入20个字符', trigger: 'blur' }
          ],
          display_fmt: [
            // { required: true, message: '请输入', trigger: 'blur' },
            { max: 20, message: '最多输入20个字符', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      fmtcolumeattr (row, column) {
        return row.colume_attr === 'user' ? '用户属性' : row.colume_attr === 'default' ? '默认属性' : row.colume_attr === 'event' ? '事件属性' : row.colume_attr === 'equipment' ? '设备属性' : '未知属性'
      },
      // 选中表格数据
      handleSelect (selection) {
        if (selection.length > 0) {
          this.checked = true
          this.metaColumeForm = selection[0]
          this.multipleSelection = selection
        } else {
          this.checked = false
        }
      },
      handleSelectionChange (selection) {
        this.delMetaColumes = selection.map(item => {
          return {
            meta_id: item.meta_id
          }
        })
      },
      // 分页，每条显示数据
      handleSizeChange (val) {
        this.pageSize = val
        this.handleCurrentChange()
      },
      // 当前页
      handleCurrentChange (val) {
        if (val) {
          this.currentPage = val
        }
        this.queryList()
      },
      // 时间反显格式化
      // setTime (s) {
      //     let dateList = ''
      //     let arr = s.replace(/^(\d{4})(\d{2})(\d{2})$/, '$1,$2,$3').split(',')
      //     dateList = (new Date(new Date().setFullYear(Number(arr[0]), Number(arr[1]) - 1, Number(arr[2]))))
      //     return dateList
      // },
      // 查询列表
      queryList () {
        let pageParams = {
          pageNo: this.currentPage,
          pageSize: this.pageSize
        }
        ajax.post(api.SELECT_METACOLUME_LIST_FOR_PAGE, pageParams).then(res => {
          this.tableLoading = false
          this.metaColumeList = res.data.list
          // Object.keys(this.metaColumeList).forEach((key) => {
          //   switch (this.metaColumeList[key].colume_attr) {
          //     case 'default':
          //     this.metaColumeList[key].colume_attr = '默认属性'
          //     break
          //     case 'event':
          //     this.metaColumeList[key].colume_attr = '事件属性'
          //     break
          //     case 'user':
          //     this.metaColumeList[key].colume_attr = '用户属性'
          //     break
          //     case 'equipment':
          //     this.metaColumeList[key].colume_attr = '设备属性'
          //     break
          //   }
          // })
          this.pageTotal = res.data.total
        })
      },
      // 获取日期
      // handleDateChange (val) {
      //     if (val) {
      //         this.te_date = getDateTime(val[0], 's').replace(/^(\d{8})(\d{6})$/, '$1')
      //         this.le_date = getDateTime(val[1], 's').replace(/^(\d{8})(\d{6})$/, '$1')
      //     } else {
      //         this.te_date = ''
      //         this.le_date = ''
      //     }
      // },
      // formatDate () {
      //     // 判断时间是不是对象,要把时间转成string 如 '20180101' 给后台
      //     if (typeof (this.te_date && this.le_date) === 'object') {
      //     let s = getDateTime(this.te_date, 's')
      //     let s1 = getDateTime(this.le_date, 's')
      //     this.te_date = s.substring(0, 8)
      //     this.le_date = s1.substring(0, 8)
      //     }
      // },
      // 新增
      addMetaColume () {
        this.$refs.table.clearSelection()
        this.metaColumeForm = {}
        this.editMode = 'ADD'
        this.editDialogShow = true
        ajax.post(api.METAIDBUILDER, {meta_table_name: 'meta_colume'}).then((res) => {
          this.$set(this.metaColumeForm, 'meta_id', res.data)
        })
      },
      // 编辑
      modifyMetaColume () {
        // 判断是否可以编辑
        if (this.checked) {
          if (this.multipleSelection.length < 2) {
            this.editDialogShow = true
            this.editMode = 'MODIFY'
            // 获取时间格式化 再添加到时间选择框里面
            // let data = this.metaColumeForm
            // this.te_date = this.setTime(data.te_date)
            // this.le_date = this.setTime(data.le_date)
            // this.metaColumeForm.date = [this.te_date, this.le_date]
            // 定义变量接收一下当前对象
            this.initFormData = JSON.parse(JSON.stringify(this.metaColumeForm))
            // 解除双向绑定
            this.metaColumeForm = JSON.parse(JSON.stringify(this.metaColumeForm))
          } else {
            this.$message.error('只能选择一条记录进行编辑')
          }
        } else {
          this.$message.error('请选择一条记录进行编辑')
        }
      },
      // 删除
      deleteMetaColume () {
        if (this.checked) {
          this.$confirm('是否删除所选记录', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let rmdata = {
              key_list: this.delMetaColumes
            }
            ajax.post(api.DELETE_METACOLUME, rmdata).then(res => {
              this.queryList()
            })
            this.$message({
              type: 'success',
              message: '删除成功'
            })
          }).catch(() => {})
        } else {
          this.$message.error('请至少选择一条记录进行删除')
        }
      },
      // 刷新
      refresh () {
        kanbanAjax(this)
        this.queryList()
        this.checked = false
      },
      // 取消新增/编辑
      closeDialog () {
        this.$refs.metaColumeForm.clearValidate()
        this.editDialogShow = false
        this.metaColumeForm = {...this.initFormData}
      },
      // 提交新增/编辑数据
      submitForm () {
        this.$refs.metaColumeForm.validate(valid => {
          // this.formatDate()
          if (valid) {
            // switch (this.metaColumeForm.colume_attr) {
            //     case '默认属性':
            //     this.metaColumeForm.colume_attr = 'default'
            //     break
            //     case '事件属性':
            //     this.metaColumeForm.colume_attr = 'event'
            //     break
            //     case '用户属性':
            //     this.metaColumeForm.colume_attr = 'user'
            //     break
            //     case '设备属性':
            //     this.metaColumeForm.colume_attr = 'equipment'
            //     break
            // }
            let insertData = {
              meta_id: this.metaColumeForm.meta_id,
              table_name: this.metaColumeForm.table_name,
              colume_name: this.metaColumeForm.colume_name,
              elem_meta_id: this.metaColumeForm.elem_meta_id,
              colume_chs: this.metaColumeForm.colume_chs,
              colume_attr: this.metaColumeForm.colume_attr,
              busi_desc: this.metaColumeForm.busi_desc,
              tech_desc: this.metaColumeForm.tech_desc,
              code_id: this.metaColumeForm.code_id,
              data_type: this.metaColumeForm.data_type,
              data_fmt: this.metaColumeForm.data_fmt,
              display_fmt: this.metaColumeForm.display_fmt,
              te_date: this.te_date,
              le_date: this.le_date
            }
            if (this.editMode === 'ADD') {
              // 新增
              ajax.post(api.INSERT_METACOLUME, insertData).then(res => {
                this.$message({
                  type: 'success',
                  message: '增加成功'
                })
                this.queryList()
                this.editDialogShow = false
              })
            } else if (this.editMode === 'MODIFY') {
              // 修改接口
              ajax.post(api.UPDATE_METACOLUME, insertData).then((res) => {
                this.ruleForm = {}
                this.handleSizeChange()
              })
                .then(() => {
                  this.$message({
                    type: 'success',
                    message: '编辑成功!'
                  })
                })
                .catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消添加'
                  })
                })
              this.editDialogShow = false
              this.refresh()
            } else {
              return false
            }
          }
        })
      },
      // 条件查询
      conditionquery () {
        const conditiondata = {
          keyword: this.condition
        }
        ajax.post(api.SELECT_METACOLUME_LIST_FOR_PAGE, conditiondata).then((res) => {
          this.metaColumeList = res.data.list
          this.pageTotal = res.data.total
        })
      },
      // 重置表单
      reset () {
        if (this.editMode === 'ADD') {
          this.metaColumeForm = {}
        } else if (this.editMode === 'MODIFY') {
          this.metaColumeForm = {...this.initFormData}
        }
        this.$refs.metaColumeForm.clearValidate()
      }
    },
    created () {
      this.queryList()
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  #metaColumeManager
    height 100%
    position relative
    .meta-colume-box
      height 100%
      padding 10px 0 20px 10px
    .header-tool-bar
      padding 0 20px
      background #fff
      line-height 50px
      .conditionquery
        width 300px
        float right
        margin-right -10px
        .el-input--mini
          width 200px
        .el-button
          vertical-align middle
    .main-cont
      padding 0
      margin-top 3px
      background #fff
      .pagination
        z-index 5
        height 36px
        background-color #fff
        position absolute
        width 100%
        bottom 0px
        padding-bottom 4px
        border-top solid 1px #f4f4f4
      .el-table
        overflow auto
        padding-bottom 71px
        &::-webkit-scrollbar
          width 0
          height 0
    .el-dialog
      width 900px
      .el-dialog__body
        padding 30px
    .el-form
      .el-input
        .el-input__inner
          height 40px
      .el-date-editor
        width 100%!important
        height 40px
        .el-range-separator
          vertical-align top
          height 40px
          line-height 40px
      .el-select
        width 268px
        height 40px
      .form-buttons
        text-align right
</style>
